<nav class="navbar navbar-default app-header" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" ng-click="isNavOpen = !isNavOpen">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!-- REDASH LOGO -->
      <a class="navbar-brand" ng-href="{{$ctrl.basePath}}"><img ng-src="{{$ctrl.logoUrl}}"/></a>
    </div>
    <div class="collapse navbar-collapse" uib-collapse="!isNavOpen">
      <!-- Main Left Nav-->

      <ul class="nav navbar-nav nav__main">
        <li class="dropdown btn-group" ng-show="$ctrl.showDashboardsMenu" uib-dropdown>
          <a id="split-button" class="btn" href="dashboards">Dashboards</a>
          <a type="button" class="btn hidden-xs" uib-dropdown-toggle>
            <span class="caret caret--nav"></span>
          </a>
          <ul class="dropdown-menu" uib-dropdown-menu>
            <li><a href="dashboards">All Dashboards</a></li>
            <li class="divider" ng-if="$ctrl.dashboards | notEmpty"></li>
            <li ng-repeat="dashboard in $ctrl.dashboards">
              <a href="dashboard/{{dashboard.slug}}" ng-bind="dashboard.name"></a>
            </li>
          </ul>
        </li>
        <li class="dropdown" ng-show="$ctrl.showQueriesMenu" uib-dropdown>
          <a href="queries">Queries</a>
        </li>
        <li ng-if="$ctrl.showAlertsLink">
          <a href="alerts">Alerts</a>
        </li>
      </ul>

      <!-- Add New Button -->
      <div class="btn-group navbar-btn navbar-left btn__new hidden-xs" uib-dropdown is-open="status.isopen">
        <button id="create-button" type="button" class="btn btn-primary btn--create" uib-dropdown-toggle ng-disabled="disabled">
          Create <span class="caret caret--nav"></span>
        </button>
        <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="create-button">
          <li role="menuitem" ng-show="$ctrl.showNewQueryMenu"><a href="queries/new">Query</a></li>
          <li role="menuitem"><a ng-show="$ctrl.currentUser.hasPermission('create_dashboard')" ng-click="$ctrl.newDashboard()">Dashboard</a></li>
          <li role="menuitem"><a href="alerts/new">Alert</a></li>
        </ul>
      </div>

      <!-- Profile -->
      <ul class="nav navbar-nav navbar-right">
        <li ng-show="$ctrl.currentUser.isAdmin">
          <a href="data_sources" title="Settings"><i class="fa fa-sliders" aria-hidden="true"></i></a>
        </li>
        <!--<li ng-show="$ctrl.showSettingsMenu">-->
          <!--<a href="users" title="Settings"><i class="fa fa-cog"></i></a>-->
        <!--</li>-->
        <li class="dropdown" uib-dropdown>
          <a href="#" class="dropdown-toggle dropdown--profile" uib-dropdown-toggle>
            <img ng-src="{{$ctrl.currentUser.profile_image_url}}" class="profile__image--navbar" width="20"/>
            <span class="dropdown--profile__username" ng-bind="$ctrl.currentUser.name"></span> <span
            class="caret caret--nav"></span></a>
          <ul class="dropdown-menu dropdown-menu--profile">
            <li>
              <a ng-href="users/me">Edit Profile</a>
            </li>
            <li class="divider" ng-if="$ctrl.currentUser.hasPermission('super_admin')">

            <li ng-show="$ctrl.currentUser.isAdmin">
              <a href="data_sources" title="Data Sources">Data Sources</a>
            </li>
            <li ng-show="$ctrl.showSettingsMenu">
              <a href="groups" title="Settings">Groups</a>
            </li>
            <li ng-show="$ctrl.showSettingsMenu">
              <a href="users" title="Settings">Users</a>
            </li>
            <li>
              <a ng-href="query_snippets">Query Snippets</a>
            </li>
            <li ng-show="$ctrl.showSettingsMenu">
              <a href="destinations" title="Settings">Alert Destinations</a>
            </li>

            <li  ng-if="$ctrl.currentUser.hasPermission('super_admin')" class="divider"></li>

            <li ng-if="$ctrl.currentUser.hasPermission('super_admin')"><a href="admin/status">System Status</a></li>

            <li class="divider"></li>

            <li>
              <a ng-click="$ctrl.logout()">Log out</a>
            </li>
          </ul>
        </li>
      </ul>

      <!-- Search -->
      <form class="navbar-form navbar-right" role="search" ng-submit="$ctrl.searchQueries()">
        <div class="input-group menu-search">
          <input type="text" ng-model="$ctrl.term" class="form-control navbar__search__input" placeholder="Search queries...">
          <span class="input-group-btn">
            <button type="submit" class="btn btn-default"><span class="zmdi zmdi-search"></span></button>
          </span>
        </div>
      </form>
    </div>
  </div>
</nav>
